<template>
	<view>
		<!-- :polyline="polyline" -->
		<map id="map" :scale="scale" :markers="markers" @markertap="markertap" @callouttap="markertap"
			:show-location="true" :latitude="latitude" :longitude="longitude" style="width: 100%;
		height: calc(120vh);
		overflow: hidden;">
			<cover-view slot="callout">
				<template v-for="(item,index) in markers" :key="index">
					<cover-view class="callout" :marker-id="item.id">
						<cover-image class="icon" :src="item.iconImg" mode="aspectFill"></cover-image>
						<cover-image class="inverted_triangle"
							src="/static/image/icon/inverted_triangle.png"></cover-image>
					</cover-view>
				</template>
			</cover-view>
		</map>
	</view>
</template>

<script>
	import amapFile from '@/libs/amap-wx.130.js';
	import {
		getLocation
	} from "@/utils/common.js";
	export default {
		data() {
			return {

			};
		},
		props: {
			latitude: {
				type: Number,
				default: 30.663467
			},
			longitude: {
				type: Number,
				default: 104.07231
			},
			scale: {
				type: Number,
				default: 10
			},
			markers: {
				type: Array,
				default: []
			},
			polyline: {
				type: Array,
				default: []
			}
		},
		methods: {
			markertap(e) {
				this.$emit('onMarkertap', e.detail.markerId)
			}
		},
		mounted() {
			getLocation();
			var that = this;
			var myAmapFun = new amapFile.AMapWX({
				key: "ebf1b964f0d15eb85a23e0201c0e937e"
			});
		},
	};
</script>

<style lang="scss" scoped>
	.map_box {
		width: 100% !important;
		height: calc(100vh - 88px - var(--status-bar-height)) !important;
		overflow: hidden !important;
	}

	.content {
		flex: 1;
	}

	.callout {
		// position: relative;
		// border: 10rpx solid #fff;
		// border-radius: 6px;
	}

	.inverted_triangle {
		width: 30rpx;
		height: 30rpx;
		position: relative;
		left: 50%;
		bottom: -5rpx;
		transform: translate(-50%, -50%);
	}

	.icon {
		width: 80rpx;
		height: 80rpx;
		border: 10rpx solid #fff;
		border-radius: 6px;
	}
</style>